<template>
  <div>
    <el-row>
      <el-col :span="10">
        <el-button
          type="primary"
          plain
          size="small"
          class="btnNew"
          @click="addRole"
          v-no-more-click
          >添加角色</el-button
        >
        <div class="listUl">
          <ul>
            <li
              v-for="(item, index) in data"
              :key="item.id"
              @click="chooseRole(item, index)"
              :class="{ bg: index == isactive }"
            >
              {{ item.roleName }}
            </li>
          </ul>
        </div></el-col
      >
      <el-col :span="14"
        ><div>
          <el-form
            label-width="80px"
            :model="form"
            ref="form"
            status-icon
            :rules="rules"
          >
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="form.roleName"></el-input>
            </el-form-item>
            <p>角色提示：业务经理输入1，财务输入2，下户人员填3，其他不必输入。</p>
            <el-form-item label="角色类型" prop="roleSale">
              <el-input v-model="form.roleSale"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="close" v-no-more-click>取 消</el-button>
            <el-button
              @click="submit"
              type="primary"
              v-if="roleSaveBtn || roleUpdateBtn"
              v-no-more-click
              >提交</el-button
            >
            <p style="margin-top: 10px" v-show="!isNew" v-if="roleDeleteBtn">
              如此角色已无用，您可以<u class="btnDelette" @click="deldialog"
                >删除此角色</u
              >
            </p>
          </span>
        </div></el-col
      >
    </el-row>
    <el-dialog
      title="提示"
      :visible.sync="dialog"
      width="20%"
      :modal-append-to-body="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <span>是否删除名字为{{ this.form.roleName }}的角色</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false" v-no-more-click>取 消</el-button>
        <el-button type="primary" @click="delRole" v-no-more-click>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveRole,
  getRoleList,
  updateRole,
  delRole
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "RoleDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialog: false,
      isactive: null,
      isNew: true,
      form: {},
      data: [
        { id: "001", roleName: "管理员", rolePerms: "admin" },
        { id: "002", roleName: "技术员", rolePerms: "rolePerms" }
      ],
      rules: {
        roleName: [
          // required: 非空规则
          // message: 提示信息
          // trigger: 触发的方式  blur  change
          { required: true, message: "请输入角色名名", trigger: "change" },
          {
            min: 2,
            max: 12,
            message: "长度在 2 到 12 个字符",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getRoleList();
  },
  computed: {
    //  添加新角色
    roleSaveBtn: function() {
      return checkPermiss("sys:role:save", this.golbalPermissions);
    },
    // 删除角色
    roleDeleteBtn: function() {
      return checkPermiss("sys:role:delete", this.golbalPermissions);
    },
    // 修改角色
    roleUpdateBtn: function() {
      return checkPermiss("sys:role:update", this.golbalPermissions);
    }
  },
  methods: {
    close() {
      this.$emit("dialogVisible", false);
    },
    //获取角色列表
    getRoleList() {
      getRoleList().then(res => {
        this.data = res.data;
      });
    },
    //添加角色按钮事件
    addRole() {
      this.isNew = true;
      this.$refs.form.resetFields();
      this.form.id = null;
    },
    //添加角色
    saveRole(obj) {
      saveRole(obj).then(res => {
        this.$refs.form.resetFields();
        this.$message.success(res.message);
        this.isactive = null;
        this.$emit("getRoleList");
        this.$emit("dialogVisible", false);
      });
    },
    //提交按钮事件
    submit() {
      this.$refs.form.validate().then(() => {
        if (this.isNew) {
          if (this.roleSaveBtn == false) {
            this.$message({
              message: "暂无该功能权限",
              type: "warning"
            });
            return;
          }
          this.saveRole(this.form);
        } else {
          if (this.roleUpdateBtn == false) {
            this.$message({
              message: "暂无该功能权限",
              type: "warning"
            });
            return;
          }
          updateRole(this.form).then(res => {
            this.$refs.form.resetFields();
            this.$message.success(res.message);
            this.isactive = null;
            this.getRoleList();
            this.$emit("getRoleList");
          });
        }
      });
    },
    //选择角色
    chooseRole(item, index) {
      this.isNew = false;
      this.isactive = index;
      this.form = JSON.parse(JSON.stringify(item));
    },
    // 打开删除角色弹框
    deldialog() {
      this.dialog = true;
    },
    delRole() {
      delRole(this.form.id)
        .then(res => {
          this.dialog = false;
          this.$message({
            message: res.message,
            type: "success"
          });
          this.isactive = null;
          this.getRoleList();
          this.$emit("getRoleList");
          this.$refs.form.resetFields();
        })
        .catch(res => {
          this.$message({
            message: res.message,
            type: "waring"
          });
        });
    }
  }
};
</script>

<style scoped type="less">
ul {
  padding: 5px;
  height: 200px;
  overflow: auto;
  background-color: rgb(241, 243, 244);
}
li {
  line-height: 35px;
}
li:hover {
  cursor: pointer;
}
.bg {
  background: #409eff;
  color: #fff;
}
.btnNew {
  position: absolute;
  top: -36px;
  left: 0;
}
.btnDelette {
  color: #409eff;
  cursor: pointer;
}
.btnDelette:hover {
  color: red;
}
</style>
